<template>
    <div>
        <div class="box">
            <img :src="headPic" alt="" class="img" @click="headtou">
            <img src="../../assets/2222.png" alt="" class="img1">
        </div>
        <div>

        </div>
        <div class="top">本模块知识仅供参考,如有需要，请在医生指导下使用</div>
        <div style="font-weight: 600;margin-left: 30px; margin-top: 20px;font-size: 30px;">{{ detaillist.name }}</div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[药品成分]</div>
            <div class="zi">{{ detaillist.component }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[用药禁忌]</div>
            <div class="zi">{{ detaillist.taboo }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[功能主治]</div>
            <div class="zi">{{ detaillist.effect }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[功能主治]</div>
            <div class="zi">{{ detaillist.effect }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[用法用量]</div>
            <div class="zi">{{ detaillist.usage }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[药品性状]</div>
            <div class="zi">{{ detaillist.shape }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[包装规格]</div>
            <div class="zi">{{ detaillist.packing }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[贮藏条件]</div>
            <div class="zi">{{ detaillist.storage
                }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[注意事项]</div>
            <div class="zi">{{ detaillist.sideEffects }}</div>
        </div>
        <div>
            <div style="color: #99c4f5;margin-left: 30px;font-size: 30px;margin-top: 45px;">[批准字号]</div>
            <div class="zi">{{ detaillist.approvalNumber }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import router from '@/router'
const route = useRoute();
const id = route.params.id;
console.log(id);
const headPic = localStorage.getItem('headpic')
const headtou = () => {
  router.push('/my')
}
const detailData = ref({});
const detaillist = ref({});
const getDetailData = async () => {
    axios.get(`/health/share/knowledgeBase/v1/findDiseaseKnowledge?id=` + id).then((res) => {
        console.log(res)
        detailData.value = res.data.result;
    })
};
const getDetail = async () => {
    axios.get(`/health/share/knowledgeBase/v1/findDrugsKnowledge?id=` + id).then((res) => {
        console.log(res)
        detaillist.value = res.data.result;
    })
};
onMounted(() => {
    getDetailData();
    getDetail();
});

</script>

<style scoped lang="scss">

.box {
    width: 100%;
    height: 50px; // 100px * 0.5
    border-bottom: 5px solid #eee; // 10px * 0.5
}

.img {
    width: 25px; // 50px * 0.5
    height: 25px; // 50px * 0.5
    margin-top: 13.5px; // 27px * 0.5
    margin-left: 7.5px; // 15px * 0.5
    border-radius: 50%;
}

.img1 {
    width: 17.5px; // 35px * 0.5
    height: 22.5px; // 45px * 0.5
    position: absolute;
    left: 340px; // 680px * 0.5
    top: 15px; // 30px * 0.5
}

.top {
    width: 100%;
    height: 30px; // 60px * 0.5
    background: red;
    font-size: 12.5px; // 25px * 0.5
    text-align: center;
    line-height: 30px; // 60px * 0.5
    color: #fff;
}

.zi {
    font-size: 7px; // 14px * 0.5
    margin-top: 12.5px; // 25px * 0.5
    margin-left: 15px; // 30px * 0.5
}

</style>
